import React from 'react';
import { Layout, Breadcrumb, Icon, Button, Checkbox, Input, Select, Form, message, TreeSelect, Tree, Tabs, DatePicker, Row, Col, Upload, Radio } from 'antd';
import { Link } from 'react-router';
import './navigation.less';
import $ from 'jquery';
import Config from '../../common/config';

const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const TreeNode = Tree.TreeNode;
const InputGroup = Input.Group;
const TabPane = Tabs.TabPane;
const { RangePicker } = DatePicker;
const RadioGroup = Radio.Group;
const props = {
    action: '//jsonplaceholder.typicode.com/posts/',
    listType: 'picture',
};

class navigationDetailForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modifyClassify: false, //选择商品弹出层
            deleteClassify: false, //删除，启用，停用，同步弹出层
        }
    }

    componentDidMount() {

    }

    //选择商品事件
    modifyClassification() {
        this.setState({
            modifyClassify: true,
        });
    }
    modifyHandleOk() {
        this.setState({
            modifyClassify: false,
        });
    }
    modifyHandleCancel() {
        this.setState({
            modifyClassify: false,
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, };
        const formItemLayout1 = { labelCol: { span: 4 }, wrapperCol: { span: 20 }, };
        const formItemLayout2 = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, };
        const formItemLayout3 = { labelCol: { span: 6 }, wrapperCol: { span: 18 }, };
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ selectedRowKeys });
            },
            getCheckboxProps: record => ({
                disabled: record.CustomerSourceCount > 0,
            }),
        };
        const props = {
            name: 'file',
            action: '//jsonplaceholder.typicode.com/posts/',
            headers: {
                authorization: 'authorization-text',
            },
        }
        return (
            <Form>
                <div className='goods-label' style={{ minWidth: 1250 }}>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                <Breadcrumb.Item>营销管理</Breadcrumb.Item>
                                <Breadcrumb.Item>导航管理</Breadcrumb.Item>
                                <Breadcrumb.Item>新增</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="导航名称" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName', {
                                            rules: [{ required: true, max: 30, message: '请输入导航名称，不超过30个字' }],
                                        })(
                                            <Input placeholder="请输入导航名称" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="排序" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName323', {
                                            rules: [{ required: true, message: '请输入排序！' }],
                                        })(
                                            <Input placeholder="请输入排序" />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="选择一级分类" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName344', {
                                            rules: [{ required: true, message: '请选择一级分类！' }],
                                        })(
                                            <Select placeholder="请选择" >
                                                <Option value="到家服务">到家服务</Option>
                                                <Option value="医疗保健">医疗保健</Option>
                                            </Select>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="选择二级分类" style={{ minHeight: '40px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName367', {
                                            rules: [{ required: true, message: '请选择二级分类' }],
                                        })(
                                            <p></p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 50 }}>
                                        {getFieldDecorator('ActivityNameryjrwew')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /></div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 50 }}>
                                        {getFieldDecorator('ActivityNameryjewer')(
                                            <div> <Checkbox >感冒发热</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /></div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 50 }}>
                                        {getFieldDecorator('ActivityNameryj234')(
                                            <div> <Checkbox >营养健康</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /></div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 50 }}>
                                        {getFieldDecorator('ActivityNameryj443')(
                                            <div> <Checkbox >护理工具</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /></div>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="选择三级分类" style={{ minHeight: '40px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName36744', {
                                            rules: [{ required: true, message: '请选择三级分类' }],
                                        })(
                                            <p></p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={6}>
                                    <p style={{ paddingLeft: 15, fontSize: 14, color: '#000', paddingBottom: 10 }}>家庭常备：</p>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew1')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew2')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew3')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew4')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew1')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew2')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew3')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label="" style={{ marginBottom: 30 }}>
                                        {getFieldDecorator('ActivityNameryjrwew4')(
                                            <div> <Checkbox >家庭常备</Checkbox><span style={{ width: 50 }}><i style={{ color: 'red' }}>* &nbsp;</i>排序</span><Input style={{ width: 120 }} placeholder="请输入排序" /><br /><span style={{ width: 50, }}><i style={{ color: 'red' }}>* &nbsp;</i>图片</span>&nbsp;
                                            <Upload {...props} style={{ marginTop: 10 }}>
                                                    <Button>
                                                        <Icon type="upload" /> 选择图片
                                                   </Button>（提示可上传图片尺寸及大小）
                                          </Upload>
                                            </div>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************查看************/}
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="创建人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName23')(
                                            <p>李四</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="创建时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName24')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="启用人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName25')(
                                            <p>system</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="启用时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName26')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="停用人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName27')(
                                            <p>system</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="停用时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName28')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************按钮************/}
                            <Row gutter={16} >
                                <Col span={12} style={{ textAlign: 'center' }}>
                                    <Button className='member-button-aa' type='primary' style={{ marginLeft: 20, width: 100, height: 40 }}>保存</Button>
                                    <Button className='member-button-aa' type='primary' style={{ marginLeft: 40, width: 100, height: 40 }}>取消</Button>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
            </Form>
        )
    }
}

const NavigationDetail = Form.create()(navigationDetailForm);
export default NavigationDetail;